<template>
    <el-row v-show="visiable">
      <v-imInitPanel/>
      <router-link to="/home">
        <el-col style="width:220px;float:left">
          <img style="height:32px;width:32px;vertical-align: middle" src="/static/logo.png"/>
          <span v-if="$store.getters.getValForKey('sysConfig')" style="cursor:pointer;color:#ffffff;font-size:24px;vertical-align: middle">{{$store.getters.getValForKey("sysConfig").webName}}</span>
        </el-col>
      </router-link>
      <el-col style="width:200px;float:right;"  v-if="this.$store.getters.getUserInfo!=null">
        <img class="navbarHeadImage" v-if="this.$store.getters.getUserInfo.thumbNailImage"  :src="this.proAPI.RESOURCE_URL+this.$store.getters.getUserInfo.thumbNailImage" />
        <img class="navbarHeadImage" v-else src="/static/img/defaultHead.jpg" />
        <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          欢迎 <div style="width:50px;float:left"  class="lue" v-html="this.$store.getters.getUserInfo.nickName?this.$store.getters.getUserInfo.nickName:'您'"></div> <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col v-else style="width:200px;float:right" >
        <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          欢迎 <span v-html="'您'"></span> <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <div class="overflow" style="padding-left:10px;" >
        <el-menu :default-active="activeIndex"
                 background-color="rgba(0,63,119,0.2)"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item :index="index" v-for="(x,index) in money" :key="index"  >
            <div @click="linkto(x.link)">{{x.name}}</div>
          </el-menu-item>
          <el-menu-item :index="money.length" :key="money.length">
            <div @click="opento(iminfo.link,iminfo.inApp)">{{iminfo.name}}</div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-row>
</template>
<script type="es6">
  export default {
    components: {
    },
    data() {
      return {
        activeIndex:'',
        visiable:false,
        text:"",
        money:[
          {name:"充值",link:'/home/account/recharge',icon:'after-sale'},
          {name:"提现",link:'/home/account/withdraw',icon:'gold-coin'},
          {name:"充值记录",link:'/home/account/rechargeLog',icon:'balance-list-o'},
          {name:"提现记录",link:'/home/account/withdrawLog',icon:'cashier-o'},
        ],
        iminfo:{name:"在线客服",link:'/home/im/imPanel',icon:'cashier-o',inApp:1}
      }
    },
    methods: {
      init() {
        this.$store.dispatch("init");
      },
      initNotices(){
      },
      handleCommand(command){
        switch (command){
          case "logout":
            this.logout();
            break;
          default:break;
        }
      },
      logout(){
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.logout,lock:1,text:'退出登录...'});
        this.proAPI.postJson(this.proAPI.URLS.logout).then((res) => {
          this.$store.commit("clearToken");
          this.$router.replace("/login");
        })
      },
      linkto(path){
        this.$router.push(path)
      },
      opento(link,flag){
        if(link!=''){
          if(flag==1){
            var route = {
              path:link,	//路径
              name:'',	//配置路由时的name
              query:{ws:this.$store.state.ws}
            }
            this.$router.push(route);
          }else{
            this.$store.commit("windowopen",{url:link,type:1});
            // window.open(link);
          }
        }else{
          this.$toast({
            message:"敬请期待"
          })
        }
      },
    },
    mounted(){
      this.init();
      this.$nextTick(()=>{
        this.visiable=true
      })
    }
  }
</script>
<style scoped>
  .el-menu.el-menu--horizontal{
    border-bottom: 0;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    background-color: rgba(0,63,119,.7)!important;
    color:#ffd04b!important;
  }
  .el-dropdown-link{
    color:#ffffff;
    cursor: pointer;
  }
  .router-link-active {
    text-decoration: none;
  }
  .navbarHeadImage{
    vertical-align:middle;
    width:30px;
    height:30px;
  }
</style>
